import React, { useState, useEffect, useRef } from "react";
import "./app.scss";
const App = () => {
  const [data, setData] = useState([
    {
      img: "http://websong.gitee.io/resources/exam/img/2.png",
      tit: "荣耀手表魔法系列(熔岩黑)",
      se: "熔岩黑",
      dj: "599.00",
      je: "599.00",
      num: 0,
      check: false,
      xian: 3,
    },
    {
      img: "http://websong.gitee.io/resources/exam/img/3.png",
      tit: "新品华为耳机降噪版本",
      se: "陶瓷白 有限充电",
      dj: "1099.00",
      je: "1099.00",
      num: 0,
      check: false,
      xian: 5,
    },
    {
      img: "http://websong.gitee.io/resources/exam/img/1.png",
      tit: "HUAWEI Mate pad 5G",
      se: "贝母白 5G全网通 6GB+128GB",
      dj: "3199.00",
      je: "3199.00",
      num: 0,
      check: false,
      xian: 99999
    },
  ]);
  const [checkbox, setCheckbox] = useState(false);
  const [$, set$] = useState(0);
  const [shop, setShop] = useState(0);
  const ref = useRef();
  let _index = null;
  //数量加
  const add = (index) => {
    const _data = [...data];
    if (_data[index].num === _data[index].xian) {
      alert("限购"+_data[index].xian+'件');
    } else {
      _data[index].num = ++_data[index].num;
    }
    setData(_data);
  };
  //数量减
  const jian = (index) => {
    const _data = [...data];
    if (_data[index].num <= 0) {
      _data[index].num = 0;
    } else {
      _data[index].num = --_data[index].num;
    }
    setData(_data);
  };
  //删除数据
  const block = (index) => {
    _index = index;
    console.log(ref.current);
    ref.current.style.display = "block";
  };
  const remver = () => {
    let _data = [...data];
    _data.splice(_index, 1);
    console.log(_data);
    setData(_data);
    ref.current.style.display = "none";
  };
  const fanhui = () => {
    ref.current.style.display = "none";
  };
  //全选,下面打钩
  const quan = () => {
    const _data = [...data];
    let bool = checkbox;
    bool = !bool;
    setCheckbox(bool);
    console.log(bool);
    _data.map((item) => {
      item.check = bool;
      return item;
    });
    setData(_data);
  };
  // 全选,上面打钩
  const input = (index) => {
    const _data = [...data];
    let num = 0;
    let lengt = _data.length;
    _data[index].check = !_data[index].check;
    setData(_data);
    const bool = _data.map((item) => {
      if (item.check === true) {
        return ++num;
      } else {
        return num;
      }
    });
    const _shop = bool.splice(bool.length - 1, 1)[0];
    setShop(_shop);
    if (lengt === _shop) {
      setCheckbox(true);
    } else {
      setCheckbox(false);
    }
  };
  //总金额
  useEffect(() => {
    const _data = [...data];
    let c = null;
    const _$ = _data.reduce((a, b) => {
      c += b.num * b.dj;
      return c;
    });
    set$(_$);
  });
  return (
    <div className="box">
      <div className="header">
        <img
          src="http://websong.gitee.io/resources/exam/img/BaiduShurufa_2020-10-8_8-47-38.png"
          alt=""
          style={{ float: "left" }}
        />
        <img
          src="http://websong.gitee.io/resources/exam/img/3333.png"
          alt=""
          style={{ float: "right" }}
        />
        <div style={{ clear: "both" }}></div>
      </div>
      <table border="1">
        <thead>
          <tr>
            <th>
              全选 <input type="checkbox" onChange={quan} checked={checkbox} />
            </th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => {
            return (
              <tr key={index}>
                <th>
                  <input
                    type="checkbox"
                    checked={item.check}
                    onChange={() => input(index)}
                  />
                </th>
                <th>
                  <div className="left">
                    <img src={item.img} alt="" />
                  </div>
                  <div className="right">
                    <p> {item.tit} </p>
                    <p style={{ color: "#999999", fontSize: "12px" }}>
                      {" "}
                      {item.se}{" "}
                    </p>
                    <p style={{ color: "red", border: "1px solid red" }}>
                      分期免息
                    </p>
                  </div>
                </th>
                <th>${item.dj}</th>
                <th>
                  <button onClick={() => jian(index)}>-</button>
                  {item.num}
                  <button onClick={() => add(index)}>+</button>
                </th>
                <th>{item.dj * item.num}</th>
                <th>
                  <button onClick={() => block(index)}>删除</button>
                </th>
              </tr>
            );
          })}
        </tbody>
        <tfoot>
          <tr>
            <th>
              全选 <input type="checkbox" onChange={quan} checked={checkbox} />
            </th>
            <th></th>
            <th></th>
            <th></th>
            <th>
              总计:￥{$}
              <br />
              已选商品:{shop}件商品
            </th>
            <th>
              <button>立即结算</button>
            </th>
          </tr>
        </tfoot>
      </table>
      <div className="remvre" ref={ref}>
        <h3>是否删除</h3>
        <button onClick={remver}>是</button>
        <button onClick={fanhui}>否</button>
      </div>
    </div>
  );
};
export default App;
